<template>
	<view class="popup_container">
		<view class="top_con">
			<!-- <view class="top_close_btn" @click="close">1</view> -->
			</view>
		<view class="popup_main">
			<!-- 选择票种 -->
			<view class="popup_title"><text>选择票种</text></view>
			<view class="ticket_group">
				<view class="ticket_name" 
				v-for="(item,index) in ticket" 
				:key="index" 
				:class="{active:index===curruntTicket}" 
				@click="select(index)">
					<view class="ticket_tag" ><text>漫时光票务</text></view>
					<view class="ticket_class">{{item}}</view>
				</view>
				<!-- <view class="ticket_name " >
					<view class="ticket_tag"><text>漫时光票务</text></view>
					<view class="ticket_class">现场票</view>
				</view> -->
			</view>
			<view class="popup_title"><text>选择场次</text></view>
			<!-- 选择场次 -->
			<view class="session_group">
				<view class="session_con active">
					<view class="session_tag">普通票</view>
					<view class="session_price">
						<view class="price_group">
							<text class="tag">￥</text>
							<text class="price">{{price}}</text>
						</view>
						<view class="session_state">在售</view>
					</view>
				</view>
			</view>
			<!-- 选择数量 -->
			<view class="num_group">
				<view class="popup_title"><text>选择数量</text></view>
				<view class="btn_group">
					<!-- <u-button class="reduce_tbn hover-class" @click="numReduce"  ripple-bg-color="#909399">-</u-button> -->
					<view class="reduce_tbn" @click="numReduce">
						<u-icon name="minus"></u-icon>
					</view>
					<input class="num" type="text" v-model="ticketNum" />
					<view class="add_tbn" @click="numAdd" >
						<u-icon name="plus"></u-icon>
					</view>
					<!-- <u-button class="add_tbn hover-class" @click="numAdd"  ripple-bg-color="#909399">+</u-button> -->
				</view>
			</view>

			<!--  -->
		</view>
		<view class="pay_group">
			<!-- 是否同意协议 -->
			<view class="agreement_group">
				<view class="consent_group" @click="isAgreement">
					<view class="consent_btn">
						<view v-if="agreementCurrent" class="btn_current">
							<u-icon class="mark_icon" name="checkmark" color="#ffffff" ></u-icon>
						</view>
					</view>
					<view class="consent_content">我已同意漫时光购票协议</view>
				</view>
				<view class="licenses" @click="goPayAgreement">查看协议</view>
			</view>
			<!-- 立即支付按钮 -->
			<button type="default" class="pay_btn" @click="goPay">确认购买</button>
		</view>
	</view>
</template>

<script>
// import radio from "@/components/radio/radio.vue"
export default {
	name: 'payPopup',
	props: {
		detailData:{
			type:Object
		}
	},
	// inject: ['popup'],
	data() {
		return {
			agreementCurrent:true,
			ticket:["预售票","现场票"],
			// 选中
			curruntTicket:0,
			// 票数量
			ticketNum:1,
			// 单价
			price:this.detailData.exhibitionPrice
		};
	},
	created() {},
	components: {
		// radio
	},
	methods: {
		isAgreement(){
			this.agreementCurrent=!this.agreementCurrent
		},
		goPayAgreement(){
			uni.navigateTo({
				url: '/pages/payAgreement/payAgreement'
			});
		},
		goPay(){
			
			uni.navigateTo({
				url: `/pages/pay/pay?price=`+this.price+`&ticketNum=`+this.ticketNum+"&exhibitionId="+this.detailData.exhibitionId ,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		/**
		 * 选择内容
		 */
		select(val){
			this.curruntTicket=val
			// console.log(this.price)
			if(this.curruntTicket==0){
					this.price= this.detailData.exhibitionPrice
					// console.log(this.price)
				}else{
					this.price= this.detailData.exhibitionPriceScene
				}
		},
		// 数量加减
		numAdd(){
			this.ticketNum++
			console.log(this.ticketNum)
		},
		numReduce(){
			if(this.ticketNum===1) return
			this.ticketNum--
		},
		// 请求漫展详情
		
		
	},
	onLoad() {
		// console.log(this.detailData)
	},
	computed:{
		// price(){
		// 	const curruntTicket=this.curruntTicket
		// 	return curruntTicket==0?this.curruntTicket.exhibitionPrice:this.curruntTicket.exhibitionPriceScene
		// 	if(curruntTicket==0){
		// 		return this.curruntTicket.exhibitionPrice
		// 	}else{
		// 		return this.curruntTicket.exhibitionPriceScene
		// 	}
		// }
	},
	watch:{
		// curruntTicket(){
		// 	const curruntTicket=this.curruntTicket
		// 	// return curruntTicket==0?this.curruntTicket.exhibitionPrice:this.curruntTicket.exhibitionPriceScene
		// 	if(curruntTicket==0){
		// 		this.price= this.detailData.exhibitionPrice
		// 		console.log(this.price)
		// 	}else{
		// 		this.price= this.detailData.exhibitionPriceScene
		// 	}
		// }
	}
};
</script>
<style lang="scss" scoped>
.popup_container {
	// height: 953rpx;
	padding: 20rpx;
	// background-color: #ffffff;
	// border-radius: 30rpx 30rpx 0 0;
	.top_con {
		width: 100%;
		height: 69rpx;
		.top_close_btn {
			float: right;
			width: 27rpx;
			height: 28rpx;
			background-color: #666666;
			border-radius: 1rpx;
		}
	}
	// 主体内容样式
	.popup_main {
		.popup_title {
			width: 100%;
			height: 34rpx;
			font-family: PingFangSC-Semibold;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 34rpx;
			color: #010101;
			margin-bottom: 50rpx;
		}
		.ticket_group {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			// 票种样式
			.ticket_name {
				flex-grow: 0;
				flex-shrink: 0;
				width: 177rpx;
				height: 122rpx;
				border: solid 2rpx #ffffff;
				background-color: #eaeaea;
				border-radius: 10rpx;
				margin-right: 50rpx;
				overflow: hidden;
				margin-bottom: 60rpx;

				.ticket_tag {
					height: 34rpx;
					width: 140rpx;
					border-radius: 0rpx 0 34rpx 0;
					background-color: #999999;
					font-family: PingFangSC-Regular;
					font-size: 20rpx;
					line-height: 34rpx;
					text-align: center;
					color: #ffffff;
				}
				.ticket_class {
					// position: absolute;
					// left: 0;
					// bottom: 0;
					height: 88rpx;
					width: 100%;
					line-height: 88rpx;
					text-align: center;
					font-family: PingFangSC-Semibold;
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
				}
				// 票种选中样式
				&.active {
					transition: all 0.3s;
					background-color: #ffe9e9;
					border: solid 2rpx #ff6262;
					.ticket_tag {
						background-color: #ff6262;
					}
					.ticket_class {
						color: #fe5976;
					}
				}
			}
		}
		.session_group {
			width: 100%;
			display: flex;
			margin-bottom: 60rpx;
			.session_con {
				// width: 196rpx;
				height: 91rpx;
				padding: 12rpx 16rpx;
				background-color: #eaeaea;
				border-radius: 10rpx;
				border: solid 2rpx #ffffff;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.session_tag {
					width: 100%;
					height: 23rpx;
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					line-height: 23rpx;
					color: #999999;
				}
				.session_price {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.price_group {
						font-family: PingFangSC-Semibold;
						font-size: 32rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						color: #999999;
						margin-right: 20rpx;
						.tag {
							font-size: 24rpx;
						}
					}
					.session_state {
						padding: 4rpx 5rpx;
						border-radius: 5rpx;
						border: solid 1rpx #999999;
						font-family: PingFangSC-Regular;
						font-size: 20rpx;
						line-height: 20rpx;
						color: #999999;
					}
				}
				&.active {
					background-color: #ffe9e9;
					border: solid 2rpx #ff6262;
					.session_tag {
						color: #fe5976;
					}
					.session_price {
						.price_group {
							color: #fe5976;
						}
						.session_state {
							border: solid 1rpx #ff6262;

							color: #fe5976;
						}
					}
				}
			}
		}
		.num_group {
			width: 100%;
			display: flex;
			justify-content: space-between;
			.btn_group {
				box-sizing: border-box;
				flex-grow: 0;
				flex-shrink: 0;
				height: 42rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border: solid 1rpx #999999;
				.u-hairline-border[data-v-6e15e680]:after{
					border: none;
				}
				// .hover-class{
				// 	background-color: #fe5976;
				// }
				.reduce_tbn,
				.add_tbn {
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					flex-shrink: 0;
					width: 72rpx;
					height: 100%;
					border: none;
					border-radius: 0;
					text-align: center;
					font-family: PingFangSC-Regular;
					font-size: 36rpx;
					// line-height: 42rpx;
					color: #643675;
				}
				.reduce_tbn{
					border-right: solid 1rpx #999999;
				}
				.add_tbn{
					border-left: solid 1rpx #999999;
				}
				.num {
					display: block;
					// border: solid 1rpx #999999;
					box-sizing: border-box;
					flex-shrink: 0;
					flex-grow: 0;
					min-width: 50rpx;
					max-width: 100rpx;
					text-align: center;
					padding: 0 20rpx;
				}
			}
		}
	}
	.pay_group {
		box-sizing: border-box;
		padding: 0 20rpx 20rpx 20rpx;
		width: 100%;
		// height: 168rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		.agreement_group {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 19rpx;
			.consent_group{
				display: flex;
				align-items: center;
				.consent_btn {
					border-radius: 50%;
					border: 1px solid #fead38;
					width: 40rpx;
					height: 40rpx;
					background-color: #FFFFFF;
					margin-right: 16rpx;
					overflow: hidden;
					.btn_current{
						width: 100%;
						height: 100%;
						background-color: #fead38;
						display: flex;
						align-items: center;
						justify-content: center;
						.mark_icon{
							// flex-grow: 1;
						}
					}
				}
				.consent_content {
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					line-height: 35rpx;
					color: #666666;
				}
			}
			.licenses {
				font-family: PingFangSC-Regular;
				font-size: 22rpx;
				line-height: 35rpx;
				color: #fe5976;
			}
			
		}
		.pay_btn {
			width: 100%;
			height: 88rpx;
			background-color: #ff6262;
			border-radius: 44rpx;
			font-family: PingFangSC-Medium;
				font-size: 36rpx;
				line-height: 88rpx;
				color: #ffffff;
		}
	}
}
</style>
